import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

let geoSphere = new THREE.SphereGeometry(50, 40, 40);
let matSphere = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  specular: 0x4488ee,
  shininess: 12
});
let meshSphere = new THREE.Mesh(geoSphere, matSphere);
scene.add(meshSphere);

/* -------------------------------------------- */
/* -------------------添加光影------------------ */
/* -------------------------------------------- */
/**
 * 环境光
 *  均匀的整体改变模型表面的明暗效果，值一般为灰度值，根据亮度可以整体提亮模型
 */
let ambientL = new THREE.AmbientLight(0x444444);
scene.add(ambientL);

/**
 * 点光源
 *  就像没有遮罩的白炽灯一样，光线从中心向周围发散，使得同一平面产生不同明暗效果
 * 点光源需要设置位置：
 *    PointLight.position.set(x, y, z)
 */
// let pointL = new THREE.PointLight({
//   color: 0xffffff
// });
// pointL.position.set(400, 400, 400);
// scene.add(pointL);

/**
 * 平行光
 *  与点光源不同，平行光的光线对同一平面任何位置夹角相同，因此定义平行光，只需定义光线的方向
 * 在三维场景中，只需要通过两个坐标点就可建立向量坐标，为此 DirectionalLight 提供了
 * DirectionalLight.position 和 DirectionalLight.target 定义入射方向
 * DirectionalLight.target 的值是一个带有 position 属性的三维对象
 */
// let directionalL = new THREE.DirectionalLight(0xffffff, 1);
// directionalL.position.set(-400, 800, -400);
// directionalL.target = meshSphere;
// scene.add(directionalL);
// 默认情况下，.position(0, 1, 0)，.target(0, 0, 0); 通常使用平行光来模拟阳光

/**
 * 聚光源
 *  沿着特定方向发散的光源，通过属性.angle可以设置聚光源发散角度，
 * 聚光源照射方向设置和平行光光源一样是通过位置.position和目标.target两个属性来实现。
 */
let spotL = new THREE.SpotLight(0xffffff);
spotL.position.set(-400, 400, 0);
spotL.target = meshSphere;
spotL.angle = Math.PI / 6; // 聚光源发散角，越小光束越聚集，越大越发散
scene.add(spotL);

/* -------------------------------------------- */
/* -------------------------------------------- */

let axesH = new THREE.AxesHelper(200);
scene.add(axesH);

// 相机
let k = innerWidth / innerHeight,
    s = 200;
let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

// 渲染器
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xaaaaaa, 1);
document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();